<template>
  <div class="picture-item"
       @click="setImg">
    <img v-if="imgSrc !=''" width="100%" height="100%" :src="imgSrc">
    请上传<br>
    {{name}}
    <input type="file" :disabled="disabled" accept="image/gif,image/jpeg,image/jpg,image/png"
           style="display:none" @change="uploadImg" ref="imgInput">
  </div>
</template>
<script>
  import axios from 'axios'
  import consts from '@/utils/consts'

  export default {
    props: {
      name: {
        type: String,
        default: ''
      },
      imgSrc: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      setImg () {
        this.$refs.imgInput.click()
      },
      uploadImg (){
        var image = new FormData()
        image.append('file', this.$refs.imgInput.files[0])
        axios.post(consts.API_URL + '/uploadImg', image, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then((res) => {
          if (res.data.errorCode === '200') {
            this.imgSrc = res.data.data
          }
        })
      },
      isUpload () {
        return this.imgSrc !== ''
      }
    }
  }
</script>

<style>
  .picture-item {
    width: 148px;
    height: 150px;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(215,221,228,1);
    padding-top: 40px;
    text-align: center;
    display: inline-block;
    position: relative;
  }

  .picture-item img {
    position: absolute;
    top: 0px;
    left: 0px;
    border: 0px;
  }

</style>
